<template>
	<view class="main-page">
		<view class="member-list">
			<view class="row-container-row-between width-100p">
				<text class="font-333-36 font-weight-600">成员列表</text>
				<text class="font-999-26">总计{{allCount}}人</text>
			</view>
			
			<view class="column-container-row-center width-100p">
				<view class="row-container width-100p mt-30">
					<view class="row-container" style="width: 50%;">
						<text class="font-999-24">排名</text>
						<text class="font-999-24" style="margin-left: 38rpx;">团员名称</text>
					</view>
					<view class="row-container-row-between" style="width: 50%;">
						<text class="font-999-24">干饭头衔</text>
						<text class="font-999-24" style="margin-left: 38rpx;">干饭贡献</text>
					</view>
				</view>
				<view class="row-container width-100p mt-30"
					v-for="(item , index) in memberList" :key="index" @click="gotoRecord(item)">
					<view class="row-container" style="width: 50%;">
						<image class="medal-ic" src="../../static/ic_gold.png" v-if="index == 0"></image>
						<image class="medal-ic" src="../../static/ic_silver.png" v-else-if="index == 1"></image>
						<image class="medal-ic" src="../../static/ic_bronze.png" v-else-if="index == 2"></image>
						<text class="font-333-26 font-weight-600 ml-19 mr-50" v-else>{{index + 1}}</text>
						<text class="font-333-26 font-weight-600 mr-30" style="white-space: nowrap;
						text-overflow: ellipsis;overflow: hidden;">{{item.nickName}}</text>
					</view>
					<view class="row-container-row-between" style="width: 50%;">
						<text class="font-333-26" v-if="index < 3 && item.profferIntegral > 0">干饭精锐</text>
						<text class="font-333-26" v-else>干饭新人</text>
						<view class="row-container">
							<text class="font-333-26">+{{item.profferIntegral}}元</text>
							<image class="wh-16 ml-4" src="../../static/ic_arrow_right_light.png"></image>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				memberList:[],
				allCount:0,
				page : 1,
				hasMoreData:false
			}
		},
		
		
		onLoad(options) {
			this.allCount = options.allCount
			this.loadMemberList()
		},
		
		onPullDownRefresh() {
			this.page = 1
			this.loadMemberList()
		},
		
		onReachBottom() {
			if (this.hasMoreData){
				this.page ++
				this.loadMemberList()
			}
		},
		
		methods: {
			loadMemberList(){
				let that = this
				this.http({
					url:'/user/inviteList',
					method:'POST',
					data:{
						pageNo : that.page,
						pageSize : 20
					},
					success(res){
						if (res.code == 200){
							if (that.page == 1){
								that.memberList = res.data
							} else{
								that.memberList = [...that.memberList, ...res.data]
							}
							that.hasMoreData = res.data.length >= 20
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			gotoRecord(item){
				uni.navigateTo({
					url:'./memberRecord?memberId=' + item.userId + "&memberName=" + item.nickName
				})
			}
		}
	}
</script>

<style lang="scss">
	.member-list{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 108rpx);
		margin: 20rpx 30rpx 20rpx 30rpx;
		padding: 24rpx 24rpx 36rpx 24rpx;
		background: white;
		border-radius: 16rpx;
		z-index: 10;
		
		.medal-ic{
			width: 54rpx;
			height: 54rpx;
			margin-right: 32rpx;
		}
		
		.avatar-ic{
			width: 60rpx;
			height: 60rpx;
			border-radius: 30rpx;
			margin-right: 16rpx;
		}
	}
	
	
</style>
